<template>
  <a-layout id="login-div">
    <a-layout-header>
      <span class="title">
        <i class="main-title">xxxBSEA后台管理系统</i>
      </span>
      <span>
        <i class="fa fa-phone fa-lg"></i>
        <i class="tel">咨询热线:400-810-1006</i>
      </span>
    </a-layout-header>
    <a-layout-content>
      <div class="login-form">
        <form class="login-form">
          <p class="form-input">
            <a-icon type="user" />
            <input type="text" placeholder="账号" v-model="form.username" />
          </p>
          <p class="form-input">
            <a-icon type="insurance" />
            <input type="password" placeholder="密码" v-model="form.password" />
          </p>
          <p class="form-input-code">
            <input type="text" placeholder="验证码" v-model="form.captcha" />
            <img class="code-img" :src="imgSrc?imgSrc:require('@/assets/errorimg.jpg')" @click="getYZM" />
          </p>
          <p class="form-checkbox">
            <template>
              <a-checkbox>记住密码</a-checkbox>
            </template>
            <a>忘记密码？</a>
          </p>
        </form>
        <a-popover>
          <template slot="content">
            <p>登录系统</p>
          </template>
          <button class="login-btn" @click="login">
            <a-icon type="login" />
          </button>
        </a-popover>
      </div>
      <a-divider>选用其他方式登录？</a-divider>
      <div class="login-third">
        <a-icon type="wechat" />
        <a-icon type="qq" />
        <a-icon type="alipay-circle" />
        <a-icon type="weibo" />
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { getYZM, login } from "./api";
export default {
  data() {
    return {
      imgSrc: null,
      form: {
        username: null,
        password: null,
        captcha: null,
        redirect: null
      }
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  mounted() {
    this.imgSrc = this.getYZM();
  },
  methods: {
    getYZM() {
      getYZM()
        .then(v => {
          this.imgSrc = window.URL.createObjectURL(v);
        })
        .catch(e => {
          this.$message.error("服务器内部错误");
        });
    },
    login() {
      this.validForm();
      login(this.form)
        .then(v => {
          if (v.ok) {
            this.$store.dispatch("addToken", v.data);
            this.$router.replace(this.redirect||"/");
          } else {
            this.$message.error(v.msg || "登录失败");
          }
        })
        .finally(() => {
          this.getYZM();
        });
    },
    validForm() {
      for (let key in this.form) {
        if (this.form[key]) {
          continue;
        }
        switch (key) {
          case "username":
            this.$message.warning("没有填写用户名");
            throw Error("没有填写用户名");
            break;
          case "password":
            this.$message.warning("没有填写密码");
            throw Error("没有填写密码");
            break;
          case "captcha":
            this.$message.warning("没有填写验证码");
            throw Error("没有填写验证码");
            break;
          default:
            break;
        }
      }
    }
  }
};
</script>

<style lang="scss">
#login-div {
  height: 100vh;
  .ant-layout-header {
    color: #fff;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: #061e35;
    min-width: 700px;
    i {
      font-style: normal;
    }
    .title {
      .main-title {
        font-weight: bold;
        font-size: 40px;
        font-style: italic;
        margin-right: 20px;
      }
    }
    .tel {
      margin-left: 8px;
    }
  }
  .ant-layout-content {
    background: url("../../assets/login-bg.jpg") no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 500px;
    min-width: 700px;
    .ant-divider-horizontal {
      width: 700px !important;
      min-width: 1px;
      letter-spacing: 3px;
      color: #909090;
    }
    .login-form {
      $input-font-size: 20px;
      $input-padding: 10px 12px 10px 8px;
      $opacity-input: 0.6;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .form-checkbox {
        width: 350px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-bottom: 20px;
        font-size: 16px;
      }
      .form-input,
      .form-input-code {
        background: #f2fff6;
        display: flex;
        align-items: center;
        overflow: hidden;
        border-radius: 40px;
        box-shadow: 0px 0px 1px 2px #4e8598;
        input {
          padding: 10px 12px 10px 30px;
          border: none;
          outline: none;
          font-size: $input-font-size !important;
          width: 200px;
          background: #f2fff6;
          opacity: $opacity-input;
          border-right: 1px solid #96acb7;
        }
        .code-img {
          width: 150px;
          height: 50px;
          background-color: #fff;
        }
      }
      .form-input {
        margin-bottom: 20px;
        input {
          padding: $input-padding;
          border: none;
          outline: none;
          font-size: $input-font-size !important;
          border-left: 1px solid #96acb7;
          width: 300px;
          background: #f2fff6;
          opacity: $opacity-input;
        }
        .anticon {
          font-size: 30px;
          margin: 0 8px 0 12px;
          color: #909090;
        }
      }
      .login-btn {
        outline: none;
        border: none;
        background: #4d4d4d;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        margin-bottom: 15px;
        .anticon {
          font-size: 30px;
          color: #5dd1f1;
        }
      }
    }
    .login-third {
      margin-top: 20px;
      width: 500px !important;
      display: flex;
      justify-content: space-evenly;
      .anticon {
        font-size: 40px;
        color: #fff;
      }
    }
  }
}
</style>